
function $(id){
	return document.getElementById(id);
}
var x=0,y=0,r=250,Hours_radian=2*Math.PI/12,Minutes_radian=2*Math.PI/60;
var num=[3,4,5,6,7,8,9,10,11,12,1,2];
var ctx=$('canvas').getContext('2d');
ctx.translate(r,r);

(function(){
	function drawZP(ctx2d,x,y,r){
		ctx2d.beginPath();
		ctx2d.lineWidth=10;
		ctx2d.strokeStyle='#000';
		
		ctx2d.arc(x,y,r-5,0,Math.PI*2);
		ctx2d.stroke();

		ctx2d.font='25px 微软雅黑';
		ctx2d.textBaseline='middle';
		ctx2d.textAlign='center';
		ctx2d.fillStyle='#000';
		for(var i=0; i<num.length; i++){
			var x1=Math.cos(Hours_radian*i)*(r-30);
			var y1=Math.sin(Hours_radian*i)*(r-30);
			ctx2d.fillText(num[i],x1,y1);
		}

		for(var j=0; j<60; j++){
			var x2=Math.cos(Minutes_radian*j)*(r-50);
			var y2=Math.sin(Minutes_radian*j)*(r-50);
			ctx2d.beginPath();
			if(j%5==0){
				ctx2d.fillStyle='#000';
			}else{
				ctx2d.fillStyle='#ccc';
			}
			ctx2d.arc(x2,y2,3,0,Math.PI*2);
			ctx2d.fill();
		}
	}

	function drawSZ(ctx2d,x,y,radian){
		ctx2d.beginPath();
		ctx2d.lineWidth=15;
		ctx2d.lineCap='round';
		ctx2d.moveTo(x,y);
		var x1=Math.cos(Minutes_radian*radian)*(r-90);
		var y1=Math.sin(Minutes_radian*radian)*(r-90);
		ctx2d.lineTo(x1,y1);
		ctx2d.stroke();
	}

	function drawFZ(ctx2d,x,y,radian){
		ctx2d.beginPath();
		ctx2d.strokeStyle='#000';
		ctx2d.lineWidth=10;
		ctx2d.lineCap='round';
		ctx2d.moveTo(x,y);
		var x1=Math.cos(Minutes_radian*radian)*(r-55);
		var y1=Math.sin(Minutes_radian*radian)*(r-55);
		ctx2d.lineTo(x1,y1);
		ctx2d.stroke();
	}

	function drawMZ(ctx2d,x,y,radian){
		ctx2d.beginPath();
		ctx2d.strokeStyle='#f00';
		ctx2d.lineWidth=2;
		ctx2d.lineCap='round';
		ctx2d.moveTo(x,y);
		var x1=Math.cos(Minutes_radian*radian)*(r-25);
		var y1=Math.sin(Minutes_radian*radian)*(r-25);
		ctx2d.lineTo(x1,y1);
		ctx2d.stroke();
	}

	setInterval(function(){
		var date=new Date();
		var hours=date.getHours()-12;
		var minutes=date.getMinutes();
		var seconds=date.getSeconds();
		hours=hours<3?(hours+12-3)*5+minutes/12:(hours-3)*5+minutes/12;
		minutes=minutes<15?minutes+60-15:minutes-15; 
		seconds=seconds<15?seconds+60-15:seconds-15;

		ctx.clearRect(-250,-250,500,500);
		drawZP(ctx,x,y,r);
		drawSZ(ctx,x,y,hours);
		drawFZ(ctx,x,y,minutes);
		drawMZ(ctx,x,y,seconds);
		ctx.beginPath();
		ctx.arc(x,y,5,0,Math.PI*2);
		ctx.fill();

	},1000);
	
})()

// $('button').onclick=function(){
// 		r=parseInt($('text').value);
// 		// drawZP(ctx,x,y,r);
// }